import { useState , useEffect } from 'react'
import { View, Image } from '@tarojs/components'
import { Search, Tabs, Tab } from '@antmjs/vantui'
import WowTaskCard from '../../components/WowTaskCard'

import './index.less'

const Task = () => {

  const [taskList, setTaskList] = useState([])

  useEffect(() => {
    setTaskList(['全部', '进行中', '已完成', '未完成'])
  }, [])

  return (
    <View>
      {/* head */}
      <View className='header'>
        <View className='header-bg' />
        <Image mode='widthFix' className='logo' src={require('../../static/images/index-logo.png')} />
      </View>
      {/* search */}
      <View className='search-box'>
        <Search placeholder='请输入要搜索的内容' background='transparent' />
      </View>
      {/* tab */}
      <Tabs animated swipeable>
        {
          taskList.map((e, i) => (
            <Tab key={i} title={e}>
              <View className='tab-box'>
                <WowTaskCard />
              </View>
            </Tab>
          ))
        }
      </Tabs>
    </View>
  )
}

export default Task